<template>
    <div>
        <basic-container>
            <div class="app-container">
                <el-form :model="otherQuery" ref="queryForm" size="small" :inline="true">
                    <el-form-item label="设备名称">
                        <el-select style="width: 180px;" v-model="otherQuery.facility_id" placeholder="请选择" clearable>
                            <el-option v-for="item in menuList" :key="item.facility_id" :label="item.name"
                                :value="item.facility_id">
                            </el-option>
                        </el-select>
                    </el-form-item>


                    <el-form-item label="产品SN">
                        <el-input style="width: 240px;" v-model="otherQuery.sequence" placeholder="请输入产品SN码"
                            clearable />
                    </el-form-item>


                </el-form>
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button v-if="hasSearched && Array.isArray(tableData) && tableData.length == 0" size="mini"
                            type="success" icon="el-icon-plus" @click="handleAdd">
                            新增
                        </el-button>
                        <el-button v-else-if="hasSearched && Array.isArray(tableData) && tableData.length > 0"
                            size="mini" type="primary" icon="el-icon-edit" @click="handleUpdate">
                            修改
                        </el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    </el-col>
                </el-row>
                <template>
                    <el-table :data="tableData" v-loading="loading" element-loading-text="拼命加载中"
                        element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"
                        ref="table" style="width: 100%">
                        <el-table-column prop="key" label="名称">
                            <template slot-scope="scope">
                                <div>{{ scope.row.key }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="value" label="数据" align="center">
                            <template slot-scope="scope">
                                <div>{{ scope.row.value }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="upper" label="上限" align="center">

                            <template slot-scope="scope">
                                <div>{{ scope.row.upper }}</div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="floor" label="下限" align="center">
                        </el-table-column>

                    </el-table>
                </template>
                <el-dialog :title="title" :visible.sync="open" width="680px" :close-on-click-modal="false"
                    append-to-body>
                    <!-- <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">添加</el-button> -->
                    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                        <template>
                            <el-table :data="dialogTableData" style="width: 100%">

                                <el-table-column prop="key" label="名称">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.key"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="value" label="数据">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.value"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="upper" label="上限">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.upper"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="floor" label="下限">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.floor"></el-input>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <el-button type="danger" size="mini"
                                            @click="handleDelete(scope.$index)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <div style="margin: 10px 0;">
                                <el-button type="success" size="mini" icon="el-icon-plus"
                                    @click="addRow">添加行</el-button>
                            </div>
                            <div>
                                <el-input placeholder="请输入内容" v-model="message">
                                    <template slot="prepend">备注</template>
                                </el-input>
                            </div>
                        </template>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="submitForm">确 定</el-button>
                        <el-button @click="cancel">取 消</el-button>
                    </div>
                </el-dialog>
            </div>

        </basic-container>
        <el-dialog title="cpk计算" :visible.sync="CpkdialogVisible" width="80%">

        </el-dialog>
    </div>
</template>

<script>
import {
    getkindList,
    getdetails,
    getCpk
} from "@/api/manualop";

export default {
    data() {
        return {

            CpkdialogVisible: false,
            Cpklist: [],
            checked: false,
            roleOptions: [],
            cpkNumbe: 1,
            NubIndex: null,
            produInd: null,
            tabPosition: "left",
            tableData: [],
            dialogTableData: [], // 对话框中的表格数据
            productData: [],

            propObj: {
                multiple: true,
                value: "mark",
                label: "label",
                children: "children",
            },
            loading: false,
            towLad: false,
            showSearch: true,
            value1: [],
            total: 1,
            inMess: [],
            menuList: [],
            options: [
                {
                    value: "1",
                    label: "生效中",
                },
                {
                    value: "2",
                    label: "禁用",
                },
                {
                    value: "3",
                    label: "审核中",
                },
            ],
            // 弹出层标题
            title: "",
            open: false,
            toNum: 0,
            isExpandAll: false,
            restaurants: [],
            activeName: null,
            refreshTable: true,
            message: '',
            otherQuery: {
                facility_id: null,
                sequence: '',
            },
            hasSearched: false, // 是否已经搜索过
            queryParams: {
                index: 1,
                size: 1000,
            },
            value: null,
            form: {
                floor: null,
                key: null,
                upper: null,
                value: null
            },
            rules: {
                role: [
                    { required: true, message: "角色名称不能为空", trigger: "blur" },
                ],
                describe: [
                    { required: true, message: "角色描述不能为空", trigger: "blur" },
                ],
            },
        };
    },
    created() {

    },
    computed: {

    },

    mounted() {
        function formatDate(date) {
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            return `${year}-${month}-${day}`;
        }
        // 获取今天的日期
        const today = new Date();
        // 获取前三个月的日期
        const threeMonthsAgo = new Date(today);
        threeMonthsAgo.setMonth(today.getMonth() - 3);
        // 格式化日期为 "yyyy-MM-dd"
        const formattedToday = formatDate(today);
        const formattedThreeMonthsAgo = formatDate(threeMonthsAgo);
        this.queryParams.start = formattedThreeMonthsAgo
        this.queryParams.finish = formattedToday
        this.value = [formattedThreeMonthsAgo, formattedToday]
        this.getList()


    },
    methods: {
        getList() {
            getkindList(this.queryParams).then((response) => {
                this.menuList = response.data.data;
            });
        },

        gitMeassList() {
            this.loading = true;
            getdetails(this.otherQuery).then((res) => {
                console.log(res.status);

                if (res.status === 200) {
                    this.tableData = res.data.data || [] // 确保tableData始终是数组
                    this.hasSearched = true; // 只有在状态码200时才标记已搜索
                } else {
                    this.tableData = []
                    this.hasSearched = false; // 状态码不是200时不显示按钮
                }

                this.loading = false;
            }).catch(() => {
                this.tableData = []
                this.hasSearched = false; // 出错时不显示按钮
                this.loading = false;
            });
        },
        handleQuery() {
            this.hasSearched = false; // 重置搜索状态
            this.gitMeassList()
        },




        handleAdd() {
            // 为新增提供一些空行数据
            this.dialogTableData = [
                { key: '', value: '', upper: '', floor: '' },
                { key: '', value: '', upper: '', floor: '' },
                { key: '', value: '', upper: '', floor: '' }
            ];
            this.open = true;
            this.title = "新增数据";
        },
        handleUpdate() {
            // 将当前数据复制到对话框数据中
            this.dialogTableData = Array.isArray(this.tableData) ? JSON.parse(JSON.stringify(this.tableData)) : [];
            this.open = true;
            this.title = "修改数据";

        },
        submitForm() {
            let newArr = {
                sequence: this.otherQuery.sequence,
                facility_id: this.otherQuery.facility_id,
                data: this.dialogTableData,
                message: this.message
            }

            this.$refs["form"].validate(valid => {
                if (valid) {
                    getCpk(newArr).then(res => {
                        console.log(res);
                        this.open = false
                        this.getList()
                    })
                }
            });
        },
        cancel() {
            this.open = false;

        },
        handleDelete(index) {
            this.dialogTableData.splice(index, 1);
        },
        addRow() {
            this.dialogTableData.push({ key: '', value: '', upper: '', floor: '' });
        },
    },
};
</script>

<style lang="scss" scoped>
// .table-container {

//     /* 设置一个具体的宽度，或者限制最大宽度 */
//     max-width: 100%;
//     /* 示例值，你可以根据需要调整 */
//     overflow-x: auto;
//     /* 当内容超出时允许横向滚动 */
// }

// /* 如果Element UI的样式没有自动添加滚动条，你可以尝试添加以下样式 */
// .el-table__body-wrapper {
//     overflow-x: auto !important;
//     /* 强制显示横向滚动条 */
// }

.message {
    width: 198%;
    background: #f8f8f9;
    display: flex;
    overflow-x: scroll;
}

.activeClass {
    color: red;
}

::v-deep .el-table .el-table__body-wrapper::-webkit-scrollbar {
    height: 15px !important;
    /* 设置水平滚动条的高度 */
}
</style>
